import React, { useState, useEffect } from "react";
import './Main.css';

export default function Main() {
    const [facts, setFacts] = useState([]);
    const [isCatsFacts, setIsCatsFacts] = useState(false);

    useEffect(() => {
        const apiUrl = isCatsFacts
            ? "https://cat-fact.herokuapp.com/facts/random?animal_type=cat&amount=5"
            : "http://127.0.0.1:8000/";

        fetch(apiUrl)
            .then((response) => response.json())
            .then((data) => setFacts(data.map((fact) => fact.text)));
    }, [isCatsFacts]);

    return (
        <div className="main">
            <h1>{isCatsFacts ? "Fun facts about Cats" : "Fun facts about React"}</h1>
            <button className="toggle-button" onClick={() => setIsCatsFacts(!isCatsFacts)}>
                Toggle Facts
            </button>
            <ul className="facts">
                {facts.map((fact, index) => (
                    <li key={index}>{fact}</li>
                ))}
            </ul>
        </div>
    );
}
